<template>
	<view class="container">
		<!-- 轮播图部分 -->
		<view class="card-container">
			<u-swiper :list="bannerList" indicator indicatorMode="line" circular></u-swiper>
		</view>

		<!-- 宫图 -->
		<view class="card-container">
			<u-grid :border="false" @click="onMenuClick" col="4">
				<u-grid-item :data-index="index" v-for="(item, index) in menuList" :key="index">
					<u-icon :customStyle="{ paddingTop: 20 + 'rpx' }" :name="item.icon" :size="32" />
					<text class="grid-text">{{ item.name }}</text>
				</u-grid-item>
			</u-grid>
			<u-toast ref="uToast" />
		</view>

		<view class="card-container">
			<view class="section-title">设备运维预警</view>

			<view class="section-list">
				<!-- 消息分类标签 -->
				<u-subsection :list="subList" mode="button" :current="subCurrent" @change="changeTab" />
			</view>

			<!-- 消息列表展示 -->
			<scroll-view scroll-y="true" scroll-left="true" class="message-list">

				<view v-for="(item, index) in subMsg" :key="index" :class="`message-item-${subCurrent}`">
					<u-icon :name="item.icon" :color="item.color" size="36" />
					<view class="message-content">
						<view class="message-title">
							{{ item.title }}
						</view>
						<view class="message-desc">{{ item.desc }}</view>
						<view class="message-footer">
							<text class="time">{{ item.time }}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>


		<!-- 添加设备运维概况部分 -->
		<view class="card-container">
			<view class="section-title">设备本月运维概况</view>
			<view class="card-title">
				<text class="card-title-label">设备总数: </text>
				<text class="stat-number">{{devSum}}</text>
			</view>
			<view class="stat-cards">
				<view class="stat-card" v-for="(item, index) in deviceOverview" :key="index" :class="'card-' + index">
					<view class="stat-content">
						<view class="stat-header">
							<text class="stat-label">{{ item.label }}</text>
						</view>
						<view class="stat-footer">
							<view class="stat-number">{{ item.value }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<tab-bar :current="0" />
</template>

<script>
	import TabBar from "../../components/tabBar/tabBar.vue";

	export default {
		components: {
			TabBar
		},
		onReady() {},
		data() {
			return {
				chart: null,
				bannerList: [
					'/static/images/index/1.jpg',
					'/static/images/index/2.jpg',
					'/static/images/index/3.jpg'
				],
				menuList: [{
						id: 999,
						name: '设备台账',
						icon: '/static/images/scan.png',
						url: '/pageTwo/pages/record/index',
						bgColor: '#2d8cf0'
					},
					{
						id: 1,
						name: '设备点检',
						icon: '/static/images/sbdj.png',
						url: '/pagesOne/pages/inspection/list',
						bgColor: '#1890FF' // 蓝色
					},
					{
						id: 2,
						name: '一级保养',
						icon: '/static/images/yjby.png',
						url: '/pages/maintenance/level1/list',
						bgColor: '#52C41A' // 绿色
					},
					{
						id: 3,
						name: '二级保养',
						icon: '/static/images/ejby.png',
						url: '/pages/maintenance/level2/list',
						bgColor: '#722ED1' // 紫色
					},
					{
						id: 4,
						name: '故障记录',
						icon: '/static/images/gzjl.png',
						url: '/pagesOne/pages/fault/index',
						bgColor: '#FA8C16' // 橙色
					},
					{
						id: 5,
						name: '维修记录',
						icon: '/static/images/wxjl.png',
						url: '/pagesOne/pages/repair/list',
						bgColor: '#F5222D' // 红色
					},
					{
						id: 6,
						name: '运行记录',
						icon: '/static/images/sjtj.png',
						url: '/pagesOne/pages/statistics/index',
						bgColor: '#13C2C2' // 青色
					},
					// {
					// 	id: 7,
					// 	name: '运行台时',
					// 	icon: '/static/images/yxts.png',
					// 	url: '/pagesOne/pages/hours/index',
					// 	bgColor: '#F5222D' // 青色
					// },
					{
						id: 7,
						name: '周期润滑',
						icon: '/static/images/yxts.png',
						url: '/pageTwo/pages/lubrication/index',
						bgColor: '#F5222D' // 青色
					},

				],
				subList: [{
						name: '任务提醒',
						badge: 0
					},
					{
						name: '管理通知',
						badge: 0
					},
					{
						name: '报警异常',
						badge: 0
					}
				],
				subErrorSum: 0,
				subBadges: [{
					isDot: true
				}, {
					isDot: true
				}, {
					isDot: false,
					count: 3
				}],
				subCurrent: 0,
				subMsg: [],
				subMage: [{
					type: '管理通知',
					title: '08设备保养新条目已发布',
					desc: '6月润滑计划已更新，请查看任务明细。',
					time: '2025-06-08 09:30',
					read: false,
					icon: 'error',
					color: 'rgba(209,206,46,0.5)'
				}, ],
				devSum: 0,
				deviceOverview: [{
						label: '在线设备数',
						value: 0
					},
					{
						label: '故障设备数',
						value: 0
					},
					{
						label: '闲置设备数',
						value: 0
					},
					{
						label: '保养未完成数',
						value: 0
					},
				], // 设备运维概况数据
			};
		},
		onLoad() {
			this.getSubMsg();
			this.getDeviceOverview();
		},

		computed: {
			filteredMessages() {
				const types = ['管理通知', '报警异常'];
				return this.messages
					.map((msg, i) => ({
						...msg,
						index: i
					}))
					.filter(msg => msg.type === types[this.activeTab]);
			},

		},

		methods: {
			onMenuClick(e) {
				const menu = this.menuList[e];
				uni.navigateTo({
					url: menu.url,
					fail: (err) => {
						console.error('页面跳转失败：', err);
						uni.showToast({
							title: '页面跳转失败',
							icon: 'none'
						});
					}
				});
			},

			handleScan() {
				uni.scanCode({
					success: (res) => {
						const result = res.result;
						console.log('扫码结果：', result);
						// 简单逻辑示例
						if (result.includes('inspection')) {
							uni.navigateTo({
								url: '/pagesOne/pages/inspection/detail?code=' + encodeURIComponent(
									result)
							});
						} else if (result.includes('repair')) {
							uni.navigateTo({
								url: '/pagesOne/pages/repair/detail?code=' + encodeURIComponent(result)
							});
						} else {
							uni.showToast({
								title: '无法识别该码',
								icon: 'none'
							});
						}
					},
					fail: () => {
						uni.showToast({
							title: '扫码失败',
							icon: 'none'
						});
					}
				});
			},

			getSubMsg() {
				this.unFiTaskMsg()
				this.faultSum()
			},

			changeTab(index) {
				this.subCurrent = index
				this.subMsg = []
				if (index === 0) {
					this.unFiTaskMsg()
				} else if (index === 1) {
					this.subMsg = this.subMage
				} else if (index === 2) {
					this.faultMsg()
				}
			},

			// 获取未完成的保养信息
			unFiTaskMsg() {
				let bmmc = uni.getStorageSync('user_permission').BM ?? "分段制造部";
				this.$req.unFiTaskMsg({
					bmmc: bmmc
				}).then(res => {
					if (res.code === '1') {
						this.subMsg = res.result.data
					}
				});
			},

			// 获取未处理的故障信息
			faultMsg() {
				let bmmc = uni.getStorageSync('user_permission').BM ?? "分段制造部";
				this.$req.faultMsg({
					bmmc: bmmc,
					scop: 3
				}).then(res => {
					if (res.code === '1') {
						this.subMsg = res.result.data
					}
				});
			},

			// 获取故障数量
			faultSum() {
				let bmmc = uni.getStorageSync('user_permission').BM ?? "分段制造部";
				this.$req.faultMsg({
					bmmc: bmmc,
					scop: 3
				}).then(res => {
					if (res.code === '1') {
						this.subList[2].badge = res.result.data.length
					}
				});
			},

			// 获取设备统计信息
			getDeviceOverview() {
				let bmmc = uni.getStorageSync('user_permission').BM ?? "船坞总装一部";
				let date = new Date()

				// 本月待保养设备数量
				this.$req.countByMonth({
					"year": date.getFullYear(),
					"month": date.getMonth() + 1,
					"bmmc": bmmc
				}).then(res => {
					if (res.code === '1') {
						let data = res.result.data;
						this.deviceOverview[3].value = data[0].maintenanceDueCount
					}
				})

				// 统计设备总数
				this.$req.countDev({
					bmmc: bmmc
				}).then(res => {
					if (res.code === '1') {
						let data = res.result.data;
						this.devSum = data.total
						this.deviceOverview[0].value = this.devSum
						// 统计本月故障设备数量
						this.$req.countFault({
							bmmc: bmmc
						}).then(res => {
							if (res.code === '1') {
								let data = res.result.data;
								this.deviceOverview[1].value = data[0].faultCount
								this.deviceOverview[0].value = this.devSum - data[0].faultCount
							}
						})
						data.details.forEach(i => {
							if (i.status === '闲置') {
								this.deviceOverview[2].value = i.count
							}
						})
					}
				})
			}
		}


	};
</script>
<style lang="scss" scoped>
	.container {
		padding-bottom: 100px;
	}

	/* 点击效果 */
	.menu-item:active .menu-icon {
		transform: scale(0.95);
	}

	.grid-text {
		font-size: 26rpx;
		color: #333;
		padding: 10rpx 0 20rpx 0rpx;
		box-sizing: border-box;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 24rpx;
		padding-left: 16rpx;
		border-left: 4rpx solid #003b90;
		display: flex;
		align-items: center;
	}

	/* 状态统计卡片样式 */
	.stat-cards {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 16rpx;
		margin-bottom: 20rpx;
	}

	.card-title {
		height: 40rpx;
		background: linear-gradient(90deg, #e6f7ff 0%, #f0f5ff 100%);
		padding: 10px;
		text-align: center;
		border-radius: 12px;
		margin-bottom: 6px;
		font-family: 'DIN Alternate', -apple-system, BlinkMacSystemFont;
	}

	.card-title .card-title-label {
		font-size: 40rpx;
		color: rgba(0, 0, 0, 0.65);
	}

	.card-title .stat-number {
		color: #1890ff;
	}

	.stat-card {
		background: #f8f9fa;
		padding: 16rpx;
		border-radius: 12rpx;
		position: relative;
		overflow: hidden;
		transition: all 0.3s ease;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
		height: 80rpx;
	}

	/* 卡片内容布局 */
	.stat-content {
		gap: 10rpx;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	/* 顶部区域 */
	.stat-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}


	.stat-label {
		font-size: 32rpx;
		color: rgba(0, 0, 0, 0.65);
	}

	/* 底部区域 */
	.stat-footer {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}

	/* 数字区域 */
	.stat-number {
		font-size: 40rpx;
		font-weight: 600;
		line-height: 1;
		font-family: 'DIN Alternate', -apple-system, BlinkMacSystemFont;
	}


	/* 卡片样式变体 */
	.stat-card:nth-child(1) {
		background: linear-gradient(135deg, #e6f7ff 0%, #f0f5ff 100%);
	}

	.stat-card:nth-child(1) .stat-number {
		color: #1890ff;
	}

	.stat-card:nth-child(2) {
		background: linear-gradient(135deg, #f6ffed 0%, #f0fff0 100%);
	}

	.stat-card:nth-child(2) .stat-number {
		color: #52c41a;
	}

	.stat-card:nth-child(3) {
		background: linear-gradient(135deg, #fff7e6 0%, #fff0e6 100%);
	}

	.stat-card:nth-child(3) .stat-number {
		color: #faad14;
	}

	.stat-card:nth-child(4) {
		background: linear-gradient(135deg, #fff1f0 0%, #fff0f0 100%);
	}

	.stat-card:nth-child(4) .stat-number {
		color: #ff4d4f;
	}

	/* 趋势样式 */
	.stat-trend.up {
		color: #52c41a;
		background: rgba(82, 196, 26, 0.1);
	}

	.stat-trend.down {
		color: #ff4d4f;
		background: rgba(255, 77, 79, 0.1);
	}

	/* 添加装饰元素 */
	.stat-card::after {
		content: '';
		position: absolute;
		right: -20rpx;
		bottom: -20rpx;
		width: 120rpx;
		height: 120rpx;
		opacity: 0.1;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		transform: rotate(-15deg);
	}

	.message-list {

		height: 420rpx;

		overflow: hidden;

	}

	.message-item-0 {
		display: flex;
		background: rgba(41, 237, 214, 0.1);
		margin: 8rpx 0 8rpx 0;
		padding: 20rpx;
		border-radius: 12rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
	}

	.message-item-1 {
		display: flex;
		background: rgba(171, 237, 41, 0.1);
		margin: 8rpx 0 8rpx 0;
		padding: 20rpx;
		border-radius: 12rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
	}


	.message-item-2 {
		display: flex;
		background: rgba(255, 122, 99, 0.2);
		margin: 8rpx 0 8rpx 0;
		padding: 20rpx;
		border-radius: 12rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
	}

	.message-content {
		flex: 1;
		margin-left: 20rpx;
	}

	.message-title {
		font-weight: 600;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		gap: 10rpx;
	}

	.message-desc {
		color: #666;
		font-size: 24rpx;
		margin: 10rpx 0;
	}

	.message-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.badge {
		font-size: 20rpx;
		color: #f5222d;
		background: #fff1f0;
		padding: 2rpx 8rpx;
		border-radius: 8rpx;
	}

	.time {
		font-size: 22rpx;
		color: #999;
	}

	.section-list {
		position: relative
	}



	/* 卡片样式变体，根据顺序设定 */
	.card-0 {
		background: linear-gradient(135deg, #e6f7ff 0%, #f0f5ff 100%);
	}

	.card-0 .stat-number {
		color: #1890ff;
	}

	.card-1 {
		background: linear-gradient(135deg, #f6ffed 0%, #f0fff0 100%);
	}

	.card-1 .stat-number {
		color: #52c41a;
	}

	.card-2 {
		background: linear-gradient(135deg, #fff7e6 0%, #fff0e6 100%);
	}

	.card-2 .stat-number {
		color: #faad14;
	}

	.card-3 {
		background: linear-gradient(135deg, #fff1f0 0%, #fff0f0 100%);
	}

	.card-3 .stat-number {
		color: #ff4d4f;
	}
</style>